<!--后结算--日清--收款表 -->
<template>
  <div class="invoice-list-box">
    <el-container class="template-box">
      <!-- tab搜索 -->
      <tabs
        is-new-tabs
        :tabs-arr="indexTabsArr"
        @returnIndex="tabsHandle" />
      <!-- 搜索 -->
      <el-header height="auto">
        <SearchForm
          label-width="90px"
          :data="indexSearchData"
          @searchForm="searchForm"
          @resetForm="resetForm"
          :submit-loading="submitLoading"
        />
      </el-header>
      <!-- 列表 -->
      <el-editable
        v-loading="submitLoading"
        :data="dataList"
        height="400"
        :columns="indexTableData"
      >
        <!-- 操作 -->
        <template
          slot="default-action"
          slot-scope="scope">
          <el-button
            v-if="[1,4].includes(scope.row.tradeOrderStatus)"
            size="small"
            @click.stop="toCollection(scope.row)"
            type="text text-primary"
          >收款</el-button>
          <el-button
            size="small"
            @click.stop="toDetails(scope.row)"
            type="text text-primary">详情</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <pagination
        ref="page"
        :request-func="getList"
        @returnData="getTableData" />
    </el-container>
  </div>
</template>

<script>
import { indexSearchData, indexTableData, indexTabsArr } from './const'
import { hasIn, cloneDeep } from 'lodash'
import SearchForm from '@components/businesscomponents/search'
import ElEditable from '@components/el-editable'
import Pagination from '@components/custom-pagination'
import tabs from '@components/tabs/index.vue'
import {
  quaryTradeReceiptList, // 配送商-财务管理-查询收款列表
  tradeReceiptStatusCount
} from '@const/beforeSettleApi'
export default {
  components: { ElEditable, SearchForm, tabs, Pagination },
  data () {
    return {
      changePath: `${this.$route.path}/change`,
      readPath: `${this.$route.path}/change`,
      // 搜索标题字段
      indexSearchData,
      // 搜索返回内容
      searchData: {},
      // 表格loading
      tableLoading: false,
      // 列表数据
      dataList: [],
      // 列表表头
      indexTableData,
      // tab字段
      indexTabsArr: cloneDeep(indexTabsArr),
      submitLoading: false,
      tabIndex: 1
    }
  },
  mounted () {
    this.getNumber()
  },
  methods: {
    // 获取列表
    getList () {
      this.submitLoading = true
      const body = {
        ...this.searchData,
        tradeOrderStatus: this.tabIndex,
        ...this.$refs.page.page
      }
      return this.$axios.$post(quaryTradeReceiptList, body)
    },
    // 获取列表数据
    getTableData (data) {
      this.dataList = data || []
      this.submitLoading = false
    },
    // tabs切换处理事件
    tabsHandle (index) {
      this.tabIndex = this.indexTabsArr[index].val || ''
      this.$refs.page.Refresh()
    },
    toCollection (data) {
      this.$router.push({
        path: this.readPath,
        query: {
          id: data.tradeId,
          status: data.tradeOrderStatus
        }
      })
    },
    // 跳转详情
    toDetails (data) {
      // 已完成
      this.$router.push({
        path: this.readPath,
        query: {
          id: data.tradeId
          // status: data.tradeOrderStatus
        }
      })
    },
    // 获取订单数量
    async getNumber () {
      // 获取统计数量
      const res = await this.$axios.$get(tradeReceiptStatusCount)
      let arr = hasIn(res, 'payload') ? res.payload : []

      const cloneIndexTabs = cloneDeep(indexTabsArr)
      let allCount = null // 全部的数量
      arr.forEach(item => {
        allCount += item.orderCount
      })

      // 获取对应tab值
      cloneIndexTabs.forEach(item => {
        arr.forEach(ite => {
          if (ite.orderStatus === item.val) {
            item.badge = { value: ite.orderCount || null }
          }
        })
      })
      cloneIndexTabs[4].badge.value = allCount // 给“全部”加小红点
      // 全部数量
      // let allCount = cloneIndexTabs.reduce((pre, next) => {
      //   return pre + next.badge.value || 0
      // }, 0)
      // ;[...cloneIndexTabs].pop().badge.value = allCount || null
      this.indexTabsArr = cloneIndexTabs
    },

    // 搜索功能-点击查询
    searchForm (condition) {
      this.searchData = condition
      this.$refs.page.Refresh()
    },

    // 点击重置
    resetForm (condition) {
      this.searchData = condition
      this.$refs.page.Refresh()
    }
  }
}
</script>

<style lang="less" scoped>
@import '../m-front-common/pc/assets/var.less';
.invoice-list-box {
  background: @bgColor;
  .el-header {
    background: #fff;
    padding: 10px;
    margin-bottom: 8px;
  }
  .template-box {
    height: 100%;
    overflow: auto;
  }
}
</style>
